<!-- 
图片管理类，带分页带，可分类
props:insert 布尔型，<ImgClassify></ImgClassify>
 -->

<template>
  <div class="all-img">
    <Cascader 
      :data="imgClassifyData"
      trigger="hover"
      :filterable="true"
      change-on-select
      v-model="cascaderValue" 
      class="imgclassify">
    </Cascader>
    
    <Row type="flex" justify="start" align="middle" :gutter="16">
      <Col :lg="4" :md="6" :xs="12" class='all-img-col'  >
        <div class="attr-1-1 all-img-item">
          <UploadFiles :classify="classify"></UploadFiles>
        </div>
        <!-- :style="{backgroundImage:`url(http://d101.paixin.com/5266903/8803/v/380/depositphotos_88033910-stock-illustration-upload-container-icon.jpg)`}" -->
      </Col>
      <template v-for="item,index in imgArrThisPage">
        <Col :lg="4" :md="6" :xs="12" class='all-img-col'  >
          <div style="">
            <div class="attr-1-1 all-img-item border-gary" :style="{backgroundImage:`url(${item.imgurl}-400X400.jpg)`}"  >
              <div class="all-img-title">
                <p v-if="!insert">
                  {{item.imgname}}
                </p>
                <p v-if="insert" @click="returnImg(item.imgurl)" >
                插入图片：
                {{item.imgname}}
                </p>
              </div>
            </div>
          </div>
          
        </Col>
      </template>
    </Row>
    <Page 
      :total="total"
      :current.sync="current"
      :page-size="pageSize"
      :page-size-opts="pageSizeOpts"
      @on-page-size-change="pageSizeChange"
      show-sizer
      show-total
      show-elevator></Page>
  </div>
</template>


<script>

export default {
  name: 'PhotoViewer',
  components: {

  },
  props:{
    insert:{
      type:Boolean,
      default:function(){
        return false;
      }
    },
  },
  data () {
    return {
      current:1,//当前页码
      pageSize:11,//每页条数
      percent:0,//上传进度条
      cascaderValue:[],//联级选择框对应的值
      pageSizeOpts:[11,23,35,47],//每页条数切换的配置
    }
  },
  created(){
    
  },
  computed: {
    //分类数据
    imgClassifyData:function(){
      let arr=this.$store.state.base.imgClassifyArr;
      return this.$comFun.listToTree(arr,{
        idKey:'value'
      });
    },
    //当前分类
    classify:function(){
      let arr=this.cascaderValue;
      return arr[arr.length - 1]||1;
    },
    //显示的图片数组
    imgArr:function(){
      return this.$store.state.base.imgArr.filter((value)=>{
        if(this.classify>1){
          return value.classify == this.classify
        }
        return true;
      });
    },
    //显示当前的总条数
    total:function(){
      return this.imgArr.length;
    },
    imgArrThisPage:function(){
      if(this.total==0){
        return;
      }
      let  star=(this.current-1)*this.pageSize+1;
      let endPage=star+this.pageSize-1;
      let end=this.total>endPage?endPage:this.total;
      return this.imgArr.slice(star-1,end);//[star,end];
    },
  },
  methods: {
    //切换每页条数
    pageSizeChange:function(pageSize){
      this.pageSize=pageSize;
    },
    //返回图片地址
    returnImg:function(imgurl){
      if(this.insert){
        this.$emit('returnimg',imgurl);
      }
    },

  }

}
</script>
<style >

</style>